<template>
  <div class="nav-container">
    <nav class="nav">
      <div class="nav-inner" v-if="indexNavs">
        <swiper :options="swiperOptionNav">
          <swiper-slide>
            <div class="navWrappper" v-for="(nav, index) in indexNavs.firstPage" :key="index">
              <router-link to="">
                <img :src="nav.pic">
                <span class="title">{{nav.title}}</span>
              </router-link>
            </div>
          </swiper-slide>
          <swiper-slide>
            <div class="navWrappper" v-for="(nav, index) in indexNavs.secondPage" :key="index">
              <router-link to="">
                <img :src="nav.pic">
                <span class="title">{{nav.title}}</span>
              </router-link>
            </div>
          </swiper-slide>
          <div class="swiper-pagination-nav" slot="pagination"></div>
        </swiper>
      </div>
    </nav>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        indexNavs: {
          firstPage: [],
          secondPage: []
        },
        swiperOption: {
          pagination: {
            el: '.swiper-pagination',
            clickable: true // 允许点击小圆点跳转
          },
          autoplay: {
            delay: 3000,
            disableOnInteraction: true // 手动切换之后继续自动轮播
          }
        }, // 初始化轮播
        swiperOptionNav: {
          pagination: {
            el: '.swiper-pagination-nav'
          }
        }
      }
    },
    props: {
      navs: { type: Array }
    },
    mounted () {
      // 处理分页数据
      this.indexNavs.firstPage = this.navs.slice(0, 10)
      this.indexNavs.secondPage = this.navs.slice(10, 20)
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../assets/stylus/mixins.styl";
  .nav-container
    width 100%
    .nav
      bg(#f6f6f6)
      border-box()
      height 1.72rem
      position relative
      overflow: hidden
      .nav-inner
        bg(#fff)
        .swiper-container
          border-box()
          height 1.72rem
          padding-bottom .1rem
          .swiper-slide
            display flex
            flex-wrap wrap
            .navWrappper
              width 20%
              a
                width: 100%
                height 100%
                display flex
                flex-direction column
                align-items center
                justify-content space-around
                img
                  size(.4rem, .4rem)
                span
                  fz(.12rem)
                  color(#666)
          .swiper-pagination-nav
            position absolute
            bottom 0
            left 46%
            span
              &.swiper-pagination-bullet
                size(6px, 6px)
              &.swiper-pagination-bullet-active
                size(12px, 6px)
                bg(#f07676)
                border-radius 4px
</style>
